import React, { Component } from 'react';
import { Tabs, Icon, message } from 'antd';
import { FormattedMessage } from 'react-intl';
import memoize from 'lodash-decorators/memoize';
import DesktopEditor from '@design/desktop';
import MobileEditor from '@design/mobile';
import messages from '@i18n/messages';
import Toolbar from './Toolbar';
// import DataEditor from '../data-editor';
import APIProvider from '../api';
import Metadata from '../design/metadata/metadata';
import './index.less';

const toolbarOptions = [
  {
    key: 'undo',
    // icon: 'undo',
    title: <FormattedMessage {...messages.fallback} />,
    action: editor => {
      if (editor && editor.undo) {
        editor.undo();
      }
    },
  },
  {
    key: 'redo',
    // icon: 'redo',
    title: <FormattedMessage {...messages.forward} />,
    action: editor => {
      if (editor && editor.redo) {
        editor.redo();
      }
    },
  },
  {
    key: 'save',
    title: <FormattedMessage {...messages.save} />,
    action: editor => {
      if (editor && editor.save) {
        const result = editor.save();
        if(result){
          message.success("保存成功！");
        }
      }
    },
  },
  {
    key: 'preview',
    title: <FormattedMessage {...messages.preview} />,
    action: editor => {
      if (editor && editor.preview) {
        editor.preview();
      }
    },
  },
  {
    key: 'import',
    title: <FormattedMessage {...messages.import} />,
    action: editor => {
      if (editor && editor.preview) {
        editor.import();
      }
    },
  },
  {
    key: 'export',
    title: <FormattedMessage {...messages.export} />,
    action: editor => {
      if (editor && editor.preview) {
        editor.export();
      }
    },
  },
];

class Sidebar extends Component {

  state = {
    activeTab: 'desktop',
  };

  constructor(props) {
    super(props);
    this.desktopEditor = React.createRef();
    this.mobileEditor = React.createRef();
  }

  componentDidMount() {
    this.forceUpdate();
  }

  @memoize
  getToolboxFormValue=(value, title) => {
    if (!value) {
      return [];
    }
    const formNodes = value.getAllFormNodes();
    const buttons = formNodes
      .groupBy(x => x.data.get('column'))
      .map(x => x.first())
      .toList()
      .map(node => ({
        title: `${node.data.get('column')}`,
        node: () => node.clone(),
      }))
      .toArray();
    return {
      key: 'other',
      title,
      buttons,
    };
  }

  onDesktopChange = change => {
    this.onValueChange(change, 'desktop');
  };

  onMobileChange = change => {
    this.onValueChange(change, 'mobile');
  };

  onValueChange = (change, platform) => {
    const { onChange } = this.props;
    if (onChange) {
      onChange(change, platform);
    }
  };

  onTabChange = key => {
    const { desktopValue } = this.props;
    if (key === 'mobile') {
      this.onValueChange({ value: desktopValue }, 'mobile');
    }else{
      this.onValueChange({ value: desktopValue }, 'desktop');
    }
    this.setState({
      activeTab: key,
    });
  };

  getController=(ref) => {
    if (ref.current) {
      return ref.current;
    }
  }

  getEditor = () => {
    const { activeTab } = this.state;
    if (activeTab === 'mobile') {
      return this.mobileEditor.current;
    }
    if (activeTab === 'desktop') {
      return this.desktopEditor.current;
    }
  };

  render() {
    const { desktopValue, mobileValue, metaValue } = this.props;
    const { activeTab } = this.state;
    // const toolboxFromDesktop = this.getToolboxFormValue(
    //   desktopValue,
    //   <FormattedMessage {...messages.desktopComponent} />
    // );
    const toolboxFromMobile = this.getToolboxFormValue(
      mobileValue,
      <FormattedMessage {...messages.mobileComponent} />
    );
    return (
      <div className="container">
        <Toolbar options={toolbarOptions} getEditor={this.getEditor} />
        <Tabs
          tabPosition="left"
          activeKey={activeTab}
          onChange={this.onTabChange}
        >
          <Tabs.TabPane
            tab={
              <div style={{ textAlign: 'center' }}>
                <Icon type="desktop" style={{ marginRight: 0 }} />
                <div>
                  <FormattedMessage {...messages.desktop} />
                </div>
              </div>
            }
            key="desktop"
          >
            <DesktopEditor
              toolbox={toolboxFromMobile}
              ref={this.desktopEditor}
              value={desktopValue}
              onChange={this.onDesktopChange}
            />
          </Tabs.TabPane>
          <Tabs.TabPane
            tab={
              <div style={{ textAlign: 'center' }}>
                <Icon type="mobile" style={{ marginRight: 0 }} />
                <div>
                  <FormattedMessage {...messages.mobile} />
                </div>
              </div>
            }
            key="mobile"
          >
            <MobileEditor
              // toolbox={toolboxFromDesktop}
              ref={this.mobileEditor}
              mobileValue={mobileValue}
              onChange={this.onMobileChange}
            />
          </Tabs.TabPane>
          {/* <Tabs.TabPane
            tab={
              <div style={{ textAlign: 'center' }}>
                <Icon type="database" />
                <div>data</div>
              </div>
            }
            key="data"
          >
            <DataEditor />
          </Tabs.TabPane> */}
          <Tabs.TabPane
            tab={
              <div style={{ textAlign: 'center' }}>
                <Icon type="api" style={{ marginRight: 0 }} />
                <div>
                  <FormattedMessage {...messages.api} />
                </div>
              </div>
            }
            key="api"
          >
            <APIProvider />
          </Tabs.TabPane>
          <Tabs.TabPane
            tab={
              <div style={{ textAlign: 'center' }}>
                <Icon type="setting" style={{ marginRight: 0 }} />
                <div>
                  <FormattedMessage {...messages.metadata} />
                </div>
              </div>
            }
            key="metadata"
          >
            <Metadata metaValue={metaValue} />
          </Tabs.TabPane>
        </Tabs>
      </div>
    );
  }
}

export default Sidebar;
